<script>
  import ImageAvater from '@/sheep/components/s-avatar/s-avatar.vue';
  import calendar from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar';
  import sheep from '@/sheep';
  import dayjs from 'dayjs';

  export default {
    name: 'yourHoroscopeToday',
    components: { ImageAvater },
    props: {
      yourHoroscopeToday: {
        type: [Object, Array],
        default: () => {
          return {};
        },
      },
      userInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    computed: {
      sq_image_path() {
        return sheep.$store('AI').sq_image_path;
      },
      nc_image(){
        return sheep.$store('AI').nc_image
      },
      // 公历日期
      publicDate() {
        // if (!!this.userInfo) {
        //   if (this.userInfo.type == 1) {
        //     let dt = calendar.lunar2solar(this.userInfo.user_date.split('-')[0], this.userInfo.user_date.split('-')[1], this.userInfo.user_date.split('-')[2], this.userInfo.isLeapMonth == 2 ? true : false)
        //     return this.$dayjs(dt.date).format('YYYY年MM月DD日')
        //   } else {
        //     return this.$dayjs(this.userInfo.user_date).format('YYYY年MM月DD日')
        //   }
        // }
      },
      // 阴历日期
      lunarDate() {
        // if (!!this.userInfo) {
        //   if (this.userInfo.type == 1) {
        //     let dt = calendar.lunar2solar(this.userInfo.user_date.split('-')[0], this.userInfo.user_date.split('-')[1], this.userInfo.user_date.split('-')[2], this.userInfo.isLeapMonth == 2 ? true : false)
        //     return `(${dt.gzYear}年) ${dt.IMonthCn}${dt.IDayCn}`
        //   } else {
        //     let dt = calendar.solar2lunar(this.userInfo.user_date.split('-')[0], this.userInfo.user_date.split('-')[1], this.userInfo.user_date.split('-')[2])
        //     return `(${dt.gzYear}年) ${dt.IMonthCn}${dt.IDayCn}`
        //   }
        // }
      },
      // 今日日期
      todayDate() {
        let dt = calendar.solar2lunar(dayjs(new Date()).format('YYYY-MM-DD').split('-')[0], dayjs(new Date()).format('YYYY-MM-DD').split('-')[1], dayjs(new Date()).format('YYYY-MM-DD').split('-')[2]);
        let str = '星期' + '日一二三四五六'.charAt(new Date().getDay());
        return `${dayjs(new Date()).format('YYYY年MM月DD日')} (${dt.gzYear}年) ${dt.IMonthCn}${dt.IDayCn} ${str}`;
      },
    },
  };
</script>

<template>
  <view class="yourHoroscopeToday" v-if="!!yourHoroscopeToday.user">
    <!--  间隔槽  -->
    <view class="hW_60"></view>
    <!-- 头部 -->
    <view class="yourHoroscopeToday_userInfo flex flex-column align-center">
      <image-avater :width="126" :height="126" :src="yourHoroscopeToday.user.avatar.indexOf('http') != -1 ? yourHoroscopeToday.user.avatar : `${nc_image}${yourHoroscopeToday.user.avatar}`"
                    style="margin-top: -26rpx;"></image-avater>
      <view class="username mt_10">
        {{ yourHoroscopeToday.user.username }}
      </view>
      <view class="birthInfo flex flex-column align-center mt_17">
        <view class="time">
          <text class="text">生日:</text>
          <text class="text">{{ yourHoroscopeToday.user.gregorian_date }}
            ({{ yourHoroscopeToday.user.ganzhi_year }}年){{ yourHoroscopeToday.user.lunar_date }}
          </text>
        </view>
        <view class="starSign mt_20">
          <text class="text">星座:</text>
          <text class="text">{{ yourHoroscopeToday.user.constellation }}</text>
        </view>
      </view>
      <view class="newTime flex align-center justify-center mt_17 mb_17">
        {{ todayDate }}
      </view>
    </view>
    <view class="content flex flex-column align-center mt_30">
      <view class="exponent">
        <view class="title flex align-center justify-center">星座指数</view>
        <view class="list flex align-center mt_68">
          <view class="label ml_22">
            工作指数
          </view>
          <su-progress inBgColor="#E5E5E5" bgColor="#FF4206" :show-percent="false" height="21" isAnimate
                       :percentage="yourHoroscopeToday.day.work_star * 20"
                       style="width: 336rpx;margin-left: 18rpx;"></su-progress>
          <view class="value ml_16">
            {{ yourHoroscopeToday.day.work_star }}分
          </view>
        </view>
        <view class="list flex align-center mt_34">
          <view class="label ml_22">
            财富指数
          </view>
          <su-progress inBgColor="#E5E5E5" bgColor="#FF4206" :show-percent="false" height="21" isAnimate
                       :percentage="yourHoroscopeToday.day.money_star * 20"
                       style="width: 336rpx;margin-left: 18rpx;"></su-progress>
          <view class="value ml_16">
            {{ yourHoroscopeToday.day.money_star }}分
          </view>
        </view>
        <view class="list flex align-center mt_34">
          <view class="label ml_22">
            爱情指数
          </view>
          <su-progress inBgColor="#E5E5E5" bgColor="#FF4206" :show-percent="false" height="21" isAnimate
                       :percentage="yourHoroscopeToday.day.love_star * 20"
                       style="width: 336rpx;margin-left: 18rpx;"></su-progress>
          <view class="value ml_16">
            {{ yourHoroscopeToday.day.love_star }}分
          </view>
        </view>
        <view class="list flex align-center mt_34 mb_41">
          <view class="label ml_22">
            综合指数
          </view>
          <su-progress class="line-progress" inBgColor="#E5E5E5" bgColor="#FF4206" :show-percent="false" isAnimate
                       height="21"
                       :percentage="yourHoroscopeToday.day.summary_star * 20"
                       style="width: 336rpx;margin-left: 18rpx;"></su-progress>
          <view class="value ml_16">
            {{ yourHoroscopeToday.day.summary_star }}分
          </view>
        </view>
      </view>
      <view class="hW_39"></view>
      <view class="gap flex align-center justify-between">
        <view class="title ml_23">幸运色</view>
        <view class="gap_content mr-60">{{ yourHoroscopeToday.day.lucky_color }}</view>
      </view>
      <view class="hW_20"></view>
      <view class="gap flex align-center justify-between">
        <view class="title ml_23">幸运数字</view>
        <view class="gap_content mr-60">{{ yourHoroscopeToday.day.lucky_num }}</view>
      </view>
      <view class="hW_20"></view>
      <view class="gap flex align-center justify-between">
        <view class="title ml_23">贵人星座</view>
        <view class="gap_content mr-60">{{ yourHoroscopeToday.day.grxz }}</view>
      </view>
      <view class="hW_20"></view>
      <view class="gap flex align-center justify-between">
        <view class="title ml_23">吉利方位</view>
        <view class="gap_content mr-60">{{ yourHoroscopeToday.day.lucky_direction }}</view>
      </view>
      <view class="hW_20"></view>
      <view class="gap flex align-center justify-between">
        <view class="title ml_23">吉利时间</view>
        <view class="gap_content mr-60" style="color: #FF4206;">{{ yourHoroscopeToday.day.lucky_time }}</view>
      </view>
      <view class="hW_68"></view>
      <view class="exponent">
        <view class="title flex align-center justify-center">今日提醒</view>
        <view class="hW_40"></view>
        <view class="exponent_text ml_22">{{ yourHoroscopeToday.day.day_notice }}</view>
        <view class="hW_40"></view>
      </view>
      <view class="hW_68"></view>
      <view class="exponent">
        <view class="title flex align-center justify-center">爱情运势</view>
        <view class="hW_40"></view>
        <view class="exponent_text ml_22">{{ yourHoroscopeToday.day.love_txt }}</view>
        <view class="hW_40"></view>
      </view>
      <view class="hW_68"></view>
      <view class="exponent">
        <view class="title flex align-center justify-center">工作运势</view>
        <view class="hW_40"></view>
        <view class="exponent_text ml_22">{{ yourHoroscopeToday.day.work_txt }}</view>
        <view class="hW_40"></view>
      </view>
      <view class="hW_68"></view>
      <view class="exponent">
        <view class="title flex align-center justify-center">财富运势</view>
        <view class="hW_40"></view>
        <view class="exponent_text ml_22">{{ yourHoroscopeToday.day.money_txt }}</view>
        <view class="hW_40"></view>
      </view>
      <view class="hW_68"></view>
      <view class="exponent">
        <view class="title flex align-center justify-center">运势简评</view>
        <view class="hW_40"></view>
        <view class="exponent_text ml_22">{{ yourHoroscopeToday.day.general_txt }}</view>
        <view class="hW_40"></view>
      </view>
    </view>
    <view class="hW_100"></view>
  </view>
</template>

<style scoped lang="scss">
  .yourHoroscopeToday {
    width: 702rpx;

    .yourHoroscopeToday_userInfo {
      width: 702rpx;
      background: #FFFFFF;
      border-radius: 20rpx 20rpx 20rpx 20rpx;

      .username {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #606060;
      }

      .birthInfo {
        .time {
          .text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #606060;
          }
        }

        .starSign {
          .text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #606060;
          }
        }
      }

      .newTime {
        //width: 487rpx;
        padding: 0 15rpx;
        height: 48rpx;
        background: #FF4206;
        border-radius: 24rpx 24rpx 24rpx 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
      }
    }
  }

  .content {
    //width: 702rpx;
    padding: 64rpx 20rpx 83rpx 20rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    background: #FFFFFF;

    .exponent {
      width: 662rpx;
      background: #F8F8F8;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      position: relative;

      .title {
        position: absolute;
        top: -28rpx;
        left: 0;
        width: 157rpx;
        height: 48rpx;
        background: #FF4206;
        border-radius: 0rpx 24rpx 24rpx 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #FFFFFF;
      }

      .list {
        .label {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #606060;
        }

        .progress {
          width: 366rpx;
          height: 21rpx;
          background: #E5E5E5;
          border-radius: 11rpx 11rpx 11rpx 11rpx;
          overflow: hidden;
        }

        .value {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #606060;
        }
      }

      .exponent_text {
        width: 616rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #606060;
      }
    }

    .gap {
      width: 662rpx;
      height: 60rpx;
      background: #F8F8F8;
      border-radius: 20rpx 20rpx 20rpx 20rpx;

      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #606060;
      }

      .gap_content {
        width: 189rpx;
        height: 40rpx;
        white-space: nowrap;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #606060;
      }
    }
  }


</style>